<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>镀锌实时工艺参数</h1>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <new-coil-card title="工艺实时参数设定值" class="common_table">
          <el-table
            :data="footTable"
            style="width: 100%; border: 1px solid"
            :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '14px', border: 'none' }"
            :cell-style="{ fontSize: '14px' }"
            max-height="210px"
          >
            <el-table-column prop="序号" label :width="columnWidth(18)" />
            <el-table-column prop="入口材料号" label="入口材料号" :width="columnWidth(18)" />
            <el-table-column prop="锌层" label="锌层" :width="columnWidth(18)" />
            <el-table-column prop="粗糙度" label="粗糙度" :width="columnWidth(18)" />
            <el-table-column prop="涂油量" label="涂油量" :width="columnWidth(18)" />
            <el-table-column prop="厚度" label="厚度" :width="columnWidth(18)" />
            <el-table-column prop="宽度" label="宽度" :width="columnWidth(18)" />
            <el-table-column prop="屈服强度" label="屈服强度" :width="columnWidth(18)" />
            <el-table-column prop="抗拉强度" label="抗拉强度" :width="columnWidth(18)" />
          </el-table>
        </new-coil-card>
      </div>
      <div class="foot">
        <div class="foot-row">
          <div class="foot-item">
            <div class="chart-title">锌层</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">实时值1:</span>
                <span class="value">{{ zincChartData1[zincChartData1.length - 1] }}</span>
              </div>
              <div class="value-item">
                <span class="label">实时值2:</span>
                <span class="value">{{ zincChartData2[zincChartData2.length - 1] }}</span>
              </div>
            </div>
            <div ref="zincChart" class="chart-container"></div>
          </div>
          <div class="foot-item">
            <div class="chart-title">粗糙度</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">实时值1:</span>
                <span class="value">{{ roughnessChartData[roughnessChartData.length - 1] }}</span>
              </div>
              <div class="value-item">
                <span class="label">实时值2:</span>
                <span class="value">{{ roughnessChartData2[roughnessChartData2.length - 1] }}</span>
              </div>
            </div>
            <div ref="roughnessChart" class="chart-container"></div>
          </div>
          <div class="foot-item">
            <div class="chart-title">涂油量</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">涂油量1:</span>
                <span class="value">{{ oilChartData1[oilChartData1.length - 1] }}</span>
              </div>
              <div class="value-item">
                <span class="label">涂油量2:</span>
                <span class="value">{{ oilChartData2[oilChartData2.length - 1] }}</span>
              </div>
            </div>
            <div ref="oilChart" class="chart-container"></div>
          </div>
        </div>
        <div class="foot-row">
          <div class="foot-item">
            <div class="chart-title">厚度</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">实时:</span>
                <span class="value">{{ thicknessChartData[thicknessChartData.length - 1] }}</span>
              </div>
              <!-- <div class="value-item">
                <span class="label">最小值:</span>
                <span class="value">1.5</span>
              </div> -->
            </div>
            <div ref="thicknessChart" class="chart-container"></div>
          </div>
          <div class="foot-item">
            <div class="chart-title">宽度</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">实时:</span>
                <span class="value">{{ widthChartData[widthChartData.length - 1] }}</span>
              </div>
              <!-- <div class="value-item">
                <span class="label">最小值:</span>
                <span class="value">1000</span>
              </div> -->
            </div>
            <div ref="widthChart" class="chart-container"></div>
          </div>
          <div class="foot-item">
            <div class="chart-title">强度</div>
            <div class="chart-values">
              <div class="value-item">
                <span class="label">屈服强度:</span>
                <span class="value">{{ tensileStrengthChartData[0] }}</span>
              </div>
              <div class="value-item">
                <span class="label">抗拉强度:</span>
                <span class="value">{{ yieldStrengthChartData[0] }}</span>
              </div>
            </div>
            <div ref="strengthChart" class="chart-container"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onUnmounted, watch } from 'vue';
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import dayjs from 'dayjs';
  import * as echarts from 'echarts';
  import { ActualPerformanceRollDeviationApi } from '/@/api/deviationanalysis/ActualPerformanceRollDeviation';

  const footTable = ref([
    {
      序号: '当前卷号',
      入口材料号: 'L19901001001',
      锌层: 'SPEC-H',
      粗糙度: '1099',
      涂油量: '0.199',
      厚度: '99%',
      宽度: '99%',
      屈服强度: '99%',
      抗拉强度: '99%',
    },
    {
      序号: '上一卷号',
      入口材料号: 'L19901001001',
      锌层: 'SPEC-H',
      粗糙度: '1099',
      涂油量: '0.199',
      厚度: '99%',
      宽度: '99%',
      屈服强度: '99%',
      抗拉强度: '99%',
    },
  ]);
  const columnWidth = (percent: number) => {
    const tableWidth = 1200;
    return (tableWidth * percent) / 100 + 'px';
  };

  // 图表相关
  const zincChart = ref<HTMLElement | null>(null);
  const roughnessChart = ref<HTMLElement | null>(null);
  const oilChart = ref<HTMLElement | null>(null);
  const thicknessChart = ref<HTMLElement | null>(null);
  const widthChart = ref<HTMLElement | null>(null);
  const strengthChart = ref<HTMLElement | null>(null);
  let zincChartInstance: echarts.ECharts | null = null;
  let roughnessChartInstance: echarts.ECharts | null = null;
  let oilChartInstance: echarts.ECharts | null = null;
  let thicknessChartInstance: echarts.ECharts | null = null;
  let widthChartInstance: echarts.ECharts | null = null;
  let strengthChartInstance: echarts.ECharts | null = null;
  let timer: any = null;
  let fetchDataTimer: any = null;
  const zincLower = ref('');
  const zincUpper = ref('');
  const roughnessLower = ref('');
  const roughnessUpper = ref('');
  const thicknessLower = ref('');
  const thicknessUpper = ref('');
  const widthLower = ref('');
  const widthUpper = ref('');
  const zincChartData1 = ref<any>([]);
  const zincChartData2 = ref<any>([]);
  const roughnessChartData = ref<any>([]);
  const roughnessChartData2 = ref<any>([]);
  const oilChartData1 = ref<any>([]);
  const oilChartData2 = ref<any>([]);
  const thicknessChartData = ref<any>([]);
  const widthChartData = ref<any>([]);
  const tensileStrengthChartData = ref<any>([]);
  const yieldStrengthChartData = ref<any>([]);
  const strengthChartDatax = ref([]);
  const xtime = ref<any>([]);

  // 初始化图表
  const initChart = () => {
    if (!zincChart.value) return;

    zincChartInstance = echarts.init(zincChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['实时1', '实时2'],
        textStyle: {
          color: '#fff',
        },
        top: 0,
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xtime.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        min: `${Number(zincLower.value)} - 10`,
        max: `${Number(zincUpper.value)} - 10`,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '实时1',
          type: 'line',
          data: zincChartData1.value,
          lineStyle: {
            color: '#FF69B4', // 粉红色
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
          markLine: {
            symbol: 'none',
            data: [
              {
                yAxis: Number(zincUpper.value),
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '上限',
                  color: '#fff',
                },
              },
              {
                yAxis: Number(zincLower.value),
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '下限',
                  color: '#fff',
                },
              },
            ],
          },
        },
        {
          name: '实时2',
          type: 'line',
          data: zincChartData2.value,
          lineStyle: {
            color: '#00BFFF', // 蓝色
          },
          itemStyle: {
            color: '#00BFFF',
          },
          symbol: 'none',
        },
      ],
    };

    zincChartInstance.setOption(option);
  };

  // 更新图表数据
  const updateChart = () => {
    zincChartData1.value.push(Math.floor(Math.random() * (Number(zincUpper.value) - Number(zincLower.value)) + Number(zincLower.value)));
    zincChartData2.value.push(Math.floor(Math.random() * (Number(zincUpper.value) - Number(zincLower.value)) + Number(zincLower.value)));
    zincChartInstance?.setOption({
      xAxis: {
        data: xtime.value,
      },
      yAxis: {
        min: Number(zincLower.value) - 5,
        max: Number(zincUpper.value) + 5,
      },
      series: [
        {
          data: zincChartData1.value,
          markLine: {
            data: [
              {
                yAxis: zincUpper.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
              {
                yAxis: zincLower.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
            ],
          },
        },
        { data: zincChartData2.value }, // 实时1
      ],
    });
  };

  // 初始化粗糙度图表
  const initRoughnessChart = () => {
    if (!roughnessChart.value) return;

    roughnessChartInstance = echarts.init(roughnessChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['实时1', '实时2'],
        textStyle: {
          color: '#fff',
        },
        top: 0,
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xtime.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        max: 1600,
        min: 600,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '实时1',
          type: 'line',
          data: roughnessChartData.value,
          lineStyle: {
            color: '#FF69B4',
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
          markLine: {
            symbol: 'none',
            data: [
              {
                yAxis: 1500,
                lineStyle: {
                  // color: '#FFD700',
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '上限',
                  // color: '#FFD700',
                  color: '#fff',
                },
              },
              {
                yAxis: 800,
                lineStyle: {
                  // color: '#00FF00',
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '下限',
                  // color: '#00FF00',
                  color: '#fff',
                },
              },
            ],
          },
        },
        {
          name: '实时2',
          type: 'line',
          data: roughnessChartData2.value,
          lineStyle: {
            color: '#00BFFF',
          },
          itemStyle: {
            color: '#00BFFF',
          },
          symbol: 'none',
        },
      ],
    };

    roughnessChartInstance.setOption(option);
  };

  // 更新粗糙度图表数据
  const updateRoughnessChart = () => {
    roughnessChartData.value.push(
      (Math.random() * (Number(roughnessUpper.value) - Number(roughnessLower.value)) + Number(roughnessLower.value)).toFixed(2)
    );
    roughnessChartData2.value.push(
      (Math.random() * (Number(roughnessUpper.value) - Number(roughnessLower.value)) + Number(roughnessLower.value)).toFixed(2)
    );
    roughnessChartInstance?.setOption({
      xAxis: {
        data: xtime.value,
      },
      yAxis: {
        min: (Number(roughnessLower.value) - 0.2).toFixed(1),
        max: Number(roughnessUpper.value) + 0.1,
      },
      series: [
        {
          data: roughnessChartData.value,
          markLine: {
            data: [
              {
                yAxis: roughnessUpper.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
              {
                yAxis: roughnessLower.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
            ],
          },
        },
        { data: roughnessChartData2.value }, // 实时1
      ],
    });
  };

  // 初始化涂油量图表
  const initOilChart = () => {
    if (!oilChart.value) return;

    oilChartInstance = echarts.init(oilChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['实时涂油量1', '实时涂油量2'],
        textStyle: {
          color: '#fff',
        },
        top: 0,
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xtime.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        max: 0.35,
        min: 0.05,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '实时涂油量1',
          type: 'line',
          data: oilChartData1.value,
          lineStyle: {
            color: '#FF69B4',
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
        },
        {
          name: '实时涂油量2',
          type: 'line',
          data: oilChartData2.value,
          lineStyle: {
            color: '#00BFFF',
          },
          itemStyle: {
            color: '#00BFFF',
          },
          symbol: 'none',
        },
      ],
    };

    oilChartInstance.setOption(option);
  };

  // 更新涂油量图表数据
  const updateOilChart = () => {
    oilChartData1.value.push((Math.random() * 0.2 + 0.1).toFixed(3)); // 生成0.1-0.3之间的随机数
    oilChartData2.value.push((Math.random() * 0.2 + 0.1).toFixed(3)); // 生成0.1-0.3之间的随机数
    oilChartInstance?.setOption({
      xAxis: {
        data: xtime.value,
      },
      series: [
        { data: oilChartData1.value }, // 实时
        { data: oilChartData2.value }, // 实时
      ],
    });
  };

  // 初始化厚度图表
  const initThicknessChart = () => {
    if (!thicknessChart.value) return;

    thicknessChartInstance = echarts.init(thicknessChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      // legend: {
      //   data: ['实时'],
      //   textStyle: {
      //     color: '#fff',
      //   },
      //   top: 0,
      // },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xtime.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        min: 1.2,
        max: 2.6,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '实时',
          type: 'line',
          data: thicknessChartData.value,
          lineStyle: {
            color: '#FF69B4',
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
          markLine: {
            symbol: 'none',
            data: [
              {
                yAxis: 2.5,
                lineStyle: {
                  // color: '#FFD700',
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '上限',
                  // color: '#FFD700',
                  color: '#fff',
                },
              },
              {
                yAxis: 1.5,
                lineStyle: {
                  // color: '#00FF00',
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '下限',
                  // color: '#00FF00',
                  color: '#fff',
                },
              },
            ],
          },
        },
      ],
    };

    thicknessChartInstance.setOption(option);
  };

  // 更新厚度图表数据
  const updateThicknessChart = () => {
    thicknessChartData.value.push(
      (Math.random() * (Number(thicknessUpper.value) - Number(thicknessLower.value)) + Number(thicknessLower.value)).toFixed(3)
    );
    thicknessChartInstance?.setOption({
      xAxis: {
        data: xtime.value,
      },
      yAxis: {
        min: (Number(thicknessLower.value) + 0.05).toFixed(3),
        max: (Number(thicknessUpper.value) + 0.05).toFixed(3),
      },
      series: [
        {
          data: thicknessChartData.value,
          markLine: {
            data: [
              {
                yAxis: thicknessUpper.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
              {
                yAxis: thicknessLower.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
            ],
          },
        },
      ],
    });
  };

  // 初始化宽度图表
  const initWidthChart = () => {
    if (!widthChart.value) return;

    widthChartInstance = echarts.init(widthChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xtime.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        min: 900,
        max: 1600,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '实时',
          type: 'line',
          data: widthChartData.value,
          lineStyle: {
            color: '#FF69B4',
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
          markLine: {
            symbol: 'none',
            data: [
              {
                yAxis: 1500,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '上限',
                  color: '#fff',
                },
              },
              {
                yAxis: 1000,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
                label: {
                  formatter: '下限',
                  color: '#fff',
                },
              },
            ],
          },
        },
      ],
    };

    widthChartInstance.setOption(option);
  };

  // 更新宽度图表数据
  const updateWidthChart = () => {
    widthChartData.value.push((Math.random() * (Number(widthUpper.value) - Number(widthLower.value)) + Number(widthLower.value)).toFixed(1));
    widthChartInstance?.setOption({
      xAxis: {
        data: xtime.value,
      },
      yAxis: {
        min: Number(widthLower.value) - 1,
        max: Number(widthUpper.value) + 1,
      },
      series: [
        {
          data: widthChartData.value,
          markLine: {
            data: [
              {
                yAxis: widthUpper.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
              {
                yAxis: widthLower.value,
                lineStyle: {
                  color: '#fff',
                  width: 1,
                },
              },
            ],
          },
        },
      ],
    });
  };

  // 初始化强度图表
  const initStrengthChart = () => {
    if (!strengthChart.value) return;

    strengthChartInstance = echarts.init(strengthChart.value);
    const option = {
      backgroundColor: 'transparent',
      title: {
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['抗拉强度', '屈服强度'],
        textStyle: {
          color: '#fff',
        },
        top: 0,
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: strengthChartDatax.value,
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
          fontSize: 10,
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
      series: [
        {
          name: '抗拉强度',
          type: 'line',
          data: yieldStrengthChartData.value,
          lineStyle: {
            color: '#FF69B4',
          },
          itemStyle: {
            color: '#FF69B4',
          },
          symbol: 'none',
        },
        {
          name: '屈服强度',
          type: 'line',
          data: tensileStrengthChartData.value,
          lineStyle: {
            color: '#00BFFF',
          },
          itemStyle: {
            color: '#00BFFF',
          },
          symbol: 'none',
        },
      ],
    };

    strengthChartInstance.setOption(option);
  };

  // 更新强度图表数据
  const updateStrengthChart = () => {
    strengthChartInstance?.setOption({
      xAxis: {
        data: strengthChartDatax.value,
      },
      series: [
        { data: yieldStrengthChartData.value }, // 抗拉强度
        { data: tensileStrengthChartData.value }, // 屈服强度
      ],
    });
  };

  const fetchData = async () => {
    try {
      const res = await ActualPerformanceRollDeviationApi.fetchData();
      zincLower.value = res.data.zincLower;
      zincUpper.value = res.data.zincUpper;
      roughnessLower.value = res.data.roughnessLower;
      roughnessUpper.value = res.data.roughnessUpper;
      thicknessLower.value = res.data.thicknessLower;
      thicknessUpper.value = res.data.thicknessUpper;
      widthLower.value = res.data.widthLower;
      widthUpper.value = res.data.widthUpper;
      strengthChartDatax.value = res.data.strengths.map((element: any) => element.entId).reverse();
      tensileStrengthChartData.value = res.data.strengths.map((element: any) => element.tensileStrength).reverse();
      yieldStrengthChartData.value = res.data.strengths.map((element: any) => element.yieldStrength).reverse();
      footTable.value[0].入口材料号 = res.data.strengths[0].entId;
      footTable.value[0].屈服强度 = res.data.strengths[0].tensileStrength;
      footTable.value[0].抗拉强度 = res.data.strengths[0].yieldStrength;
      updateStrengthChart();
    } catch (error) {
      ElMessage.error('获取数据失败');
    }
  };

  onMounted(() => {
    fetchData();
    fetchDataTimer = setInterval(() => {
      fetchData();
    }, 300000);
    initChart();
    initRoughnessChart();
    initOilChart();
    initThicknessChart();
    initWidthChart();
    initStrengthChart();
    timer = setInterval(() => {
      xtime.value.push(dayjs().format('HH:mm:ss'));
      updateChart();
      updateRoughnessChart();
      updateOilChart();
      updateThicknessChart();
      updateWidthChart();
    }, 2000);
    window.addEventListener('resize', () => {
      zincChartInstance?.resize();
      roughnessChartInstance?.resize();
      oilChartInstance?.resize();
      thicknessChartInstance?.resize();
      widthChartInstance?.resize();
      strengthChartInstance?.resize();
    });
  });

  onUnmounted(() => {
    if (timer) {
      clearInterval(timer);
    }
    if (fetchDataTimer) {
      clearInterval(fetchDataTimer);
    }
    zincChartInstance?.dispose();
    roughnessChartInstance?.dispose();
    oilChartInstance?.dispose();
    thicknessChartInstance?.dispose();
    widthChartInstance?.dispose();
    strengthChartInstance?.dispose();
    window.removeEventListener('resize', () => {
      zincChartInstance?.resize();
      roughnessChartInstance?.resize();
      oilChartInstance?.resize();
      thicknessChartInstance?.resize();
      widthChartInstance?.resize();
      strengthChartInstance?.resize();
    });
  });

  watch(
    () => {
      return xtime.value.length;
    },
    () => {
      if (xtime.value.length > 60) {
        xtime.value.shift();
      }
      if (zincChartData1.value.length > 60) {
        zincChartData1.value.shift();
      }
      if (zincChartData2.value.length > 60) {
        zincChartData2.value.shift();
      }
      if (roughnessChartData.value.length > 60) {
        roughnessChartData.value.shift();
      }
      if (roughnessChartData2.value.length > 60) {
        roughnessChartData2.value.shift();
      }
      if (oilChartData1.value.length > 60) {
        oilChartData1.value.shift();
      }
      if (oilChartData2.value.length > 60) {
        oilChartData2.value.shift();
      }
      if (thicknessChartData.value.length > 60) {
        thicknessChartData.value.shift();
      }
      if (widthChartData.value.length > 60) {
        widthChartData.value.shift();
      }
    }
  );
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 4px rgba(51, 102, 153, 0.5);

  .home {
    height: 100vh;
    overflow: hidden !important;
  }

  .content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
  }

  .top {
    flex: 1;
    background: transparent;
    height: 20%;
  }

  .foot {
    height: 80%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
  }

  .foot-row {
    height: 50%;
    display: flex;
    width: 100%;
  }

  .foot-item {
    position: relative;
    width: 33.33%;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box;
  }

  .foot-item:last-child {
    border-right: none;
  }

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .titleMain {
    h1 {
      color: #fff;
      font-size: 24px;
      margin: 0;
      margin-top: -15px;
    }
  }

  :deep(.el-table) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.el-table tr:nth-child(odd)) {
    background-color: #0f2142 !important;
  }

  :deep(.el-table tr:nth-child(even)) {
    background-color: #142a52 !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: rgba(66, 180, 255, 0.1) !important;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table th.el-table__cell) {
    background-color: transparent !important;
    border-color: #06279d !important;
    color: #c0c4cc;
  }

  :deep(.el-table th.el-table__cell) {
    color: #b8e8ff;
    background-color: #183272 !important;
    border-bottom: 1px solid #06279d !important;
  }

  :deep(.el-table--border .el-table__inner-wrapper::after),
  :deep(.el-table--border::after),
  :deep(.el-table--border::before),
  :deep(.el-table__border-left-patch),
  :deep(.el-table--border .el-table__inner-wrapper::before) {
    background-color: #06279d !important;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table th.el-table__cell.is-leaf) {
    border-bottom: 1px solid #06279d !important;
  }

  :deep(.el-table--border td.el-table__cell),
  :deep(.el-table--border th.el-table__cell) {
    border-right: 1px solid #06279d !important;
  }

  :deep(.el-table__body-wrapper) {
    scrollbar-width: thin;
    scrollbar-color: #3a5a8a #142a52;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 6px;
    height: 6px;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background: #142a52;
    border-radius: 3px;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background-color: #3a5a8a;
    border-radius: 3px;
  }

  .chart-title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
  }

  .chart-container {
    width: 100%;
    height: calc(100% - 30px);
    background: transparent;
  }

  .chart-values {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    gap: 15px;
  }

  .value-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 14px;
  }

  .value-item .label {
    color: #ffd700;
  }

  .value-item .value {
    color: #00bfff;
  }
</style>
